<extend name="Public/base"/>

<block name="body">
    <style>
        .settlement-box ul{display: block;clear: both; height: 35px; padding-left: 15px; line-height: 35px; background: #EFEFEF;}
        .settlement-box li{width: 30%; float: left;}
        .sub-title{display: block; clear: both;}
        .form-horizontal{margin-top: 20px;}
        .cf .item-label{font-weight: normal;}
    </style>
  <div class="main-title">
      <h2>申请提现</h2>
  </div>
    <div class="sub-title">
        <h3>账户信息</h3>
    </div>
  <div class="settlement-box">
    <ul>
      <li>账户名称：{$info.company_name}</li>
      <li>公司所在地：{$info.company_address}</li>
      <li>公司电话：{$info.company_phone}</li>
    </ul>
    <ul>
      <li>联系人姓名：{$info.contacts_name}</li>
      <li>联系人电话：{$info.contacts_phone}</li>
      <!--li>电子邮箱：{$info.payment_sn}</li-->
    </ul>
      <ul>
          <li>银行开户名：{$info.settlement_bank_account_name}</li>
          <li>银行账号：{$info.settlement_bank_account_number}</li>
          <li>开户银行支行名称：{$info.settlement_bank_name}</li>
      </ul>
      <ul>
          <li>支行联行号：{$info.settlement_bank_code}</li>
          <li>开户银行所在地：{$info.bank_address}</li>
      </ul>
    <notempty name="info.memo">
    <p>
      <strong>备注信息：</strong>{$info.memo}
    </p>
    </notempty>
  </div>
    <div class="chart-body">
        <div class="box" id="chart_box"></div>
    </div>
    <div class="chart-body">
        <div class="box"   id="chart_box1"></div>
    </div>
    <style>
        .box{
            width: 40%;
            float: left;
            margin-right:20px;
        }
    </style>

    <form id="form" action="{:U('add')}" method="post" class="form-horizontal">
        <div class="form-item cf" style="width: 100%;overflow:hidden;">
            <label class="item-label">提现金额<span class="check-tips">（订单总金额 {$total_amount|default=0.00}元，已提现金额 {$Withdrawed|default=0.00}元，提现申请中 {$withouting|default=0.00}元， 账户金额 {$total_price|default=0.00}元, 可提现金额 <span style="color:rgb(39,174,96)">{$now_price|default=0.00}</span>元）</span></label>
            <div class="controls">
                <input type="text" class="text input-small" name="amount" value=""> 元
            </div>
        </div>
        <div class="form-item cf">
            <label class="item-label">备注<span class="check-tips">（可以在下方文本框中输入备注）</span></label>
            <div class="controls">
                <textarea name="remark" class="textarea input-large" rows="6"></textarea>
            </div>
        </div>
        <div><button class="btn submit-btn ajax-post" name="submit" id="submit" type="submit" target-form="form-horizontal">提交申请</button><a href="{$Think.cookie.__forward__}" class="btn btn-return">返 回</a></div>
    </form>
  <!-- 结算合计 -->
</block>
<php>$other_price = $total_amount - $total_price</php>
<block name="script">
    <script language="javascript" type="text/javascript" src="__JS__/echarts/echarts-all.js"></script>
    <script type="text/javascript">
    //导航高亮
    highlight_subnav("{:U('add')}");
  </script>
    <script type="text/javascript">
        var total_amount = '{$total_amount}';
        var total_price = '{$total_price}';
        var now_price = '{$now_price}';
        var Withdrawed  = '{$Withdrawed}';
        var other_price = '{$other_price}';
        var withouting  = '{$withouting}';

        var unpay_amount = '{$unpay_amount}';
        var success_amount = '{$success_amount}';
        var ispay_amount = '{$ispay_amount}';
        var refund_amount = '{$refund_amount}';



        $('#chart_box').css({height:'300px',width:'500px', marginTop:'50px'});
        var myChart = echarts.init(document.getElementById('chart_box'));
        option = {
            backgroundColor: '',
            title: {
                text: '提现资金详情',
                left: 'center',
                top: 20,
                textStyle: {
                    color: 'gray'
                }
            },

            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },

            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    data:[
                        {value:total_amount,name:'店铺总金额'},
                        {value:withouting, name:'提现申请中'},
                        {value:Withdrawed, name:'已提现金额'},
                        {value:now_price, name:'可提现金额'}
                    ].sort(function (a, b) { return a.value - b.value; }),
                    roseType: 'radius',
                    label: {
                        normal: {
                            textStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        };
        myChart.setOption(option);


        //订单详情
        $('#chart_box1').css({height:'300px',width:'500px', marginTop:'50px'});
        var myChart = echarts.init(document.getElementById('chart_box1'));
        option = {
            backgroundColor: '',
            title: {
                text: '订单资金详情',
                left: 'center',
                top: 20,
                textStyle: {
                    color: 'gray'
                }
            },

            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },

            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    data:[
                        {value:unpay_amount,name:'待支付金额'},
                        {value:success_amount, name:'交易完成金额'},
                        {value:ispay_amount, name:'已支付金额'},
                        {value:refund_amount, name:'退款金额'}
                    ].sort(function (a, b) { return a.value - b.value; }),
                    roseType: 'radius',
                    label: {
                        normal: {
                            textStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        };
        myChart.setOption(option);

    </script>
</block>